<div th:fragment="html" xmlns:th="http://www.w3.org/1999/xhtml">
    <!--xmlns:th="http://www.w3.org/1999/xhtml"-->
    <script>
        $(function () {
            var oiid = getUrlParms("oiid");
            var data4Vue = {
                uri: 'forebuy',
                total: 0,
                orderItems: [],
                order: {address: '', post: '', receiver: '', mobile: '', userMessage: ''}
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted: function () { //mounted　表示这个 Vue 对象加载成功了
                    this.load();
                },
                methods: {
                    load: function () {
                        var url = this.uri + "/?oiid=" + oiid;
                        axios.get(url).then(function (response) {
                            var result = response.data;
                            vue.total = result.data.total;
                            vue.orderItems = result.data.orderItems;
                            vue.$nextTick(function () {
                                linkDefaultActions();
                            })
                        });
                    },
                    submitOrder: function () {
                        var url = "forecreateOrder";
                        axios.post(url, this.order).then(function (response) {
                            var result = response.data;
                            var oid = result.data.oid;
                            var total = result.data.total;
                            location.href = "alipay?oid=" + oid + "&total=" + total;
                        });
                    }
                }
            });

        })
    </script>
    <div class="buyPageDiv">
        <div class="buyFlow">
            <img class="pull-left" src="img/site/simpleLogo.png">
            <img class="pull-right" src="img/site/buyflow.png">
            <div style="clear:both"></div>
        </div>
        <div class="address">
            <div class="addressTip">输入收货地址</div>
            <div>

                <table class="addressTable">
                    <tr>
                        <td class="firstColumn">详细地址<span class="redStar">*</span></td>

                        <td><textarea name="address" v-model="order.address"
                                      placeholder="建议您如实填写详细收货地址，例如接到名称，门牌好吗，楼层和房间号等信息"></textarea></td>
                    </tr>
                    <tr>
                        <td>邮政编码</td>
                        <td><input name="post" v-model="order.post" placeholder="如果您不清楚邮递区号，请填写000000" type="text"></td>
                    </tr>
                    <tr>
                        <td>收货人姓名<span class="redStar">*</span></td>
                        <td><input name="receiver" v-model="order.receiver" placeholder="长度不超过25个字符" type="text"></td>
                    </tr>
                    <tr>
                        <td>手机号码 <span class="redStar">*</span></td>
                        <td><input name="mobile" v-model="order.mobile" placeholder="请输入11位手机号码" type="text"></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="productList">
            <div class="productListTip">确认订单信息</div>


            <table class="productListTable">
                <thead>
                <tr>
                    <th colspan="2" class="productListTableFirstColumn">
                        <img class="tmallbuy" src="img/site/tmallbuy.png">
                        <a class="marketLink" href="#nowhere">店铺：天猫店铺</a>
                        <a class="wangwanglink" href="#nowhere"> <span class="wangwangGif"></span> </a>
                    </th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>配送方式</th>
                </tr>
                <tr class="rowborder">
                    <td colspan="2"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                </thead>
                <tbody class="productListTableTbody">
                <tr class="orderItemTR" v-for="oi,index in orderItems">
                    <td class="orderItemFirstTD">
                        <img class="orderItemImg"
                             :src="'img/productSingle_middle/'+oi.product.firstProductImage.id+'.jpg'">
                    </td>
                    <td class="orderItemProductInfo">
                        <a :href="'product?pid='+oi.product.id" class="orderItemProductLink">
                            {{oi.product.name}}
                        </a>
                        <img src="img/site/creditcard.png" title="支持信用卡支付">
                        <img src="img/site/7day.png" title="消费者保障服务,承诺7天退货">
                        <img src="img/site/promise.png" title="消费者保障服务,承诺如实描述">
                    </td>
                    <td>
								<span class="orderItemProductPrice">
									{{oi.product.promotePrice | formatMoneyFilter}}
								</span>
                    </td>
                    <td>
                        <span class="orderItemProductNumber">{{oi.number}}</span>
                    </td>
                    <td>
								<span class="orderItemUnitSum">
									{{oi.product.promotePrice*oi.number | formatMoneyFilter}}
								</span>
                    </td>
                    <td rowspan="5" class="orderItemLastTD" v-if="index==0">
                        <label class="orderItemDeliveryLabel">
                            <input type="radio" value="" checked="checked">
                            普通配送
                        </label>
                        <!--class="form-control"-->
                        <select class="orderItemDeliverySelect">
                            <option>快递 免邮费</option>
                        </select>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="orderItemSumDiv">
                <div class="pull-left">
                    <span class="leaveMessageText">给卖家留言:</span>
                    <span>
						<img class="leaveMessageImg" src="img/site/leaveMessage.png">
					</span>
                    <span class="leaveMessageTextareaSpan">
						<textarea name="userMessage" v-model="order.userMessage"
                                  class="leaveMessageTextarea"></textarea>
						<div>
							<span>还可以输入200个字符</span>
						</div>
					</span>
                </div>
                <span class="pull-right">店铺合计(含运费): ￥
					{{total|formatMoneyFilter}}
				</span>
            </div>

        </div>
        <div class="orderItemTotalSumDiv">
            <div class="pull-right">
                <span>实付款：</span>
                <span class="orderItemTotalSumSpan">{{total|formatMoneyFilter}}</span>
            </div>
        </div>
        <div class="submitOrderDiv">
            <button type="submit" class="submitOrderButton" @click="submitOrder">提交订单</button>
        </div>
    </div>
</div>
